<template>
  <div class="login-container">
    <vue-particles
      class="texiao"
      color="#007ACC"
      :particleOpacity="6"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <Nav></Nav>

    <div class="tou">
      <img src="../../assets/mao.png" alt="" />
      <h2 style="color:#000">与世界分享你的知识、经验和见解</h2>
    </div>

    <div class="login">
      <el-tabs
        class="tabs"
        style="text-align:center"
        v-model="value1"
        v-loading="loading1"
      >
        <el-tab-pane label="注册" name="first">
          <!-- 用户名注册 -->
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            v-if="this.zc_type == 1"
          >
            <el-form-item label="用户名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <!-- <el-form-item label="手机号码" prop="number">
              <el-input v-model.number="ruleForm.number"></el-input>
            </el-form-item> -->
            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="ruleForm.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >注册</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
            <div class="states">
              <span class="left layui-icon layui-icon-cellphone "
                ><a @click="chan_number">手机号注册</a></span
              >
              <span class="right layui-icon layui-icon-email"
                ><a @click="chan_email">邮箱注册</a></span
              >
            </div>
            <span class="agreement-tip"
              >点击「注册」按钮，即代表你同意<a href="https://www.xhsd.com/;"
                >《读者书店协议》</a
              ></span
            >
          </el-form>
          <!-- 手机号注册 -->
          <el-form
            :model="sjh"
            status-icon
            :rules="rules"
            ref="sjh"
            label-width="100px"
            class="demo-ruleForm"
            v-if="this.zc_type == 0"
          >
            <el-form-item label="手机号码" prop="number">
              <el-input v-model.number="sjh.number"></el-input>
            </el-form-item>
            <!-- 手机号注册发送验证码 -->
            <el-form-item label="验证码">
              <el-col :span="11">
                <el-form-item>
                  <el-input v-model="sjh.yzm"></el-input>
                </el-form-item>
              </el-col>

              <button
                type="button"
                @click="yzm1"
                class="layui-btn"
                :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
              >
                {{ this.yzm }}
              </button>
              <!-- <el-button :disabled="true"   @click="yzm1" >{{this.yzm}}</el-button> -->
            </el-form-item>

            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="sjh.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="sjh.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('sjh')"
                >注册</el-button
              >
              <el-button @click="resetForm('sjh')">重置</el-button>
            </el-form-item>
            <div class="states">
              <span class="left layui-icon layui-icon-username "
                ><a @click="chan_name">用户名注册</a></span
              >
              <span class="right layui-icon layui-icon-email"
                ><a @click="chan_email">邮箱注册</a></span
              >
            </div>
            <span class="agreement-tip"
              >点击「注册」按钮，即代表你同意<a href="https://www.xhsd.com/;"
                >《读者书店协议》</a
              ></span
            >
          </el-form>

          <el-form
            :model="email"
            status-icon
            :rules="rules"
            ref="email"
            label-width="100px"
            class="demo-ruleForm"
            v-if="this.zc_type == 2"
          >
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="email.email"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-col :span="11">
                <el-form-item>
                  <el-input v-model="email.yzm"></el-input>
                </el-form-item>
              </el-col>

              <button
                type="button"
                @click="yzm1"
                class="layui-btn"
                :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
              >
                {{ this.yzm }}
              </button>
              <!-- <el-button :disabled="true"   @click="yzm1" >{{this.yzm}}</el-button> -->
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input
                type="password"
                v-model="email.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="email.checkPass"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('email')"
                >注册</el-button
              >
              <el-button @click="resetForm('email')">重置</el-button>
            </el-form-item>
            <div class="states">
              <span class="left layui-icon layui-icon-username "
                ><a @click="chan_name">用户名注册</a></span
              >
              <span class="right layui-icon layui-icon-cellphone "
                ><a @click="chan_number">手机号注册</a></span
              >
            </div>
            <span class="agreement-tip"
              >点击「注册」按钮，即代表你同意<a href="https://www.xhsd.com/;"
                >《读者书店协议》</a
              ></span
            >
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="登录" name="second">
          <el-form
            :model="login"
            status-icon
            ref="login"
            label-width="100px"
            class="demo-ruleForm"
            v-if="login_type == 1"
            v-loading="loading2"
          >
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="login.name"
                placeholder="手机号/用户名/邮箱"
              ></el-input>
            </el-form-item>

            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="login.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                style="width:300px"
                type="primary"
                v-loading="loading"
                @click="submitForm1"
                >登录</el-button
              >
            </el-form-item>
            <div class="states">
              <span class="left"><a @click="login_yzm">验证码登录</a></span>
              <span class="right"><a href="javascript:;">无法登陆？</a></span>
            </div>
            <div class="states">
              <span  class="social_account">社交账号登陆</span>
             <a href="/oauth2/render/baidu"><img  src="../../assets/百度.png" style="cursor: pointer; width:20px;  margin-top: 0px;margin-left: -110px;" alt=""></a> 
              
              <a href="/oauth2/render/gitee"> <img src="../../assets/gitee2.png" style="cursor: pointer; width:20px;  margin-top: 0px;margin-left:8px" alt=""></a>
  
            </div>
          </el-form>

          <el-form
            :model="login_number"
            status-icon
            :rules="rules"
            ref="login_number"
            label-width="100px"
            class="demo-ruleForm"
            v-if="login_type == 0"
          >
            <el-form-item label="账号" prop="number">
              <el-input
                v-model.number="login_number.number"
                placeholder="手机号"
              ></el-input>
            </el-form-item>

            <el-form-item label="验证码">
              <el-col :span="11">
                <el-form-item>
                  <el-input v-model="login_number.rules"></el-input>
                </el-form-item>
              </el-col>

              <button
                type="button"
                @click="yzm1"
                class="layui-btn"
                :class="activeClass == 0 ? 'layui-btn-disabled form' : ''"
              >
                {{ this.yzm }}
              </button>
              <!-- <el-button :disabled="true"   @click="yzm1" >{{this.yzm}}</el-button> -->
            </el-form-item>

            <el-form-item>
              <el-button
                style="width:300px"
                type="primary"
                v-loading="loading"
                @click="submitForm2"
                >登录</el-button
              >
            </el-form-item>
            <div class="states">
              <span class="left"><a @click="login_yhm">用户名登录</a></span>
              <span class="right"><a href="javascript:;">无法登陆？</a></span>
            </div>
            <div class="states">
              <span  class="social_account">社交账号登陆</span>
              <img src="../../assets/QQ.png" style="cursor: pointer; width:20px;  margin-top: 0px;margin-left: -110px;" alt="">
               <img src="../../assets/微博.png" style="cursor: pointer; width:20px;  margin-top: 0px;margin-left:2px" alt="">
               <img src="../../assets/gitee2.png" style="cursor: pointer; width:16px;  margin-top: 0px;margin-left:2px" alt="">
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  user_login,
  ByPhoneNum,
  ByEmail,
  ByUser,
} from "../../network/API/login";
// import {} from '../../network/API/login'
import Nav from "../../com/components/Common/Nav";
import HeadNav from "../../com/components/Common/HeadNav";
import axios from "axios";
export default {
  components: { Nav, HeadNav },
  data() {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else if (value.length < 4 || value.length > 10) {
        return callback(new Error("用户名必须大于4位和小于11位"));
      } else {
        this.ifname(); //发请求是否注册
        setTimeout(() => {
          if (this.type.type_name == "404") {
            callback(new Error("该用户已被注册"));
          } else {
            callback();
          }
        }, 1000);
      }
    };

    var checkNumber = (rule, value, callback) => {
      var regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }

      if (!Number.isInteger(value)) {
        callback(new Error("请输入数字值"));
      } else {
        if (!regMobile.test(value)) {
          callback(new Error("请输入有效的11位手机号码！"));
        } else {
          this.phone(); //发请求是否注册
          setTimeout(() => {
            if (this.value1 == "second") {
              if (this.type.type_phone == "200") {
                callback(new Error("该手机号未被注册"));
                this.activeClass = 0;
              } else {
                callback();
                this.activeClass = -1;
                this.disabled = true;
              }
            } else {
              if (this.type.type_phone == "404") {
                callback(new Error("该手机号已注册"));
                this.activeClass = 0;
              } else {
                callback();
                this.activeClass = -1;
                this.disabled = true;
              }
            }
          }, 1000);
        }
      }
    };

    var email = (rule, value, callback) => {
      var emailrule = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }

      if (!emailrule.test(value)) {
        callback(new Error("请输入有效的邮箱地址！"));
      } else {
        this.isemail(); //发请求是否注册
        setTimeout(() => {
          if (this.value1 == "second") {
            if (this.type.type_email == "200") {
              callback(new Error("该邮箱未被注册"));
              this.activeClass = 0;
            } else {
              callback();
              this.activeClass = -1;
              this.disabled = true;
            }
          } else {
            if (this.type.type_email == "404") {
              callback(new Error("该邮箱已注册"));
              this.activeClass = 0;
            } else {
              callback();
              this.activeClass = -1;
              this.disabled = true;
            }
          }
        }, 500);
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (value.length > 12 || value.length < 6) {
          callback(new Error("密码位数必须在6和11位之间"));
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (this.zc_type == 0) {
        if (value === this.ruleForm.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else if (this.zc_type == 1) {
        if (value === this.sjh.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else {
        if (value !== this.email.pass) {
          callback(new Error("两次输入密码不一致hh!"));
        } else {
          callback();
        }
      }
    };

    return {
      activeClass: -1, // 0为默认选择第一个，-1为不选择
      disabled: false,
      time1: "", //定时器
      loading: "",
      loading1: "",
      loading2: "",
      value1: "first",
      zc_type: 2,
      login_type: 1,
      yzm: "发送验证码",

      type: {
        type_name: "hh",
        type_phone: "",
        type_number: "hh",
        type_password: "",
        tab_name: "second",
        type_email: "",
      },
      login: {
        password: "",
        name: "",
      },
      login_number: {
        number: "",
        email: "",
        rules: "",
        type: "",
      },
      sjh: {
        pass: "",
        checkPass: "",
        number: "",
        yzm: "",
      },
      email: {
        pass: "",
        checkPass: "",
        email: "",
        yzm: "",
      },
      ruleForm: {
        pass: "",
        checkPass: "",
        name: "",
        number: "",
        type: 0,
      },
      rules: {
        email: [{ validator: email, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        number: [{ validator: checkNumber, trigger: "blur" }],
        name: [{ validator: checkName, trigger: "blur" }],
      },
      time: 5,
    };
  },

  methods: {
    yzm1() {
      if (this.zc_type == 2 && this.value1 == "first") {
        this.isemail(); //发请求是否注册

        setTimeout(() => {
          if (this.type.type_email == 404) {
            this.$message({
              message: "该邮箱已注册",
              type: "warning",
            });
            this.activeClass = -1;
          } else {
            axios
              .get("/code/createCode")
              .then((res) => {});
            var time = 60;
            this.activeClass = 0;
            var that = this;
            this.time1 = setInterval(function() {
              ;
              time--, (that.yzm = time + "秒");
              if (time == 0) {
                that.activeClass = -1;
                that.yzm = "重新发送";
                that.disablen = true;
                clearInterval(that.time1);
              }
            }, 1000);
            axios
              .get("/code/sendEmail", {
                params: {
                  email: this.email.email,
                  type: 1,
                },
              })
              .then((res) => {
                ;
                if (res.data.code == 404) {
                  this.open("验证码发送失败，请重试！");

                  clearInterval(this.time1);
                  this.yzm = "重新发送";
                  this.activeClass = -1;
                  clearInterval(this.time1);
                } else {
                  this.$message({
                    message: "验证码发送成功，请查收！",
                    type: "success",
                  });
                }

                ;
              });
          }
        }, 1000);
      } else {
        this.phone(); //发请求是否注册

        setTimeout(() => {
          if (this.value1 == "second") {
            if (this.type.type_phone == "200") {
              this.$message({
                message: "该手机号未注册",
                type: "warning",
              });
              this.activeClass = -1;
            } else {
              axios
                .get("/code/createCode")
                .then((res) => {});

              var time = 3;
              this.activeClass = 0;
              var that = this;
              this.time1 = setInterval(function() {
                ;
                time--, (that.yzm = time + "秒");
                if (time == 0) {
                  that.activeClass = -1;
                  that.yzm = "重新发送";
                  that.disablen = true;
                  clearInterval(that.time1);
                }
              }, 1000);
              axios
                .get("/code/sendPhoneCode", {
                  params: {
                    phoneNum: this.login_number.number,
                    type: 2,
                  },
                })
                .then((res) => {
                  ;
                  if (res.data.code == 404) {
                    this.open("验证码发送失，请重试！");

                    clearInterval(this.time1);
                    this.yzm = "重新发送";
                    this.activeClass = -1;
                    clearInterval(this.time1);
                  } else {
                    this.$message({
                      message: "验证码发送成功，请查收！",
                      type: "success",
                    });
                  }
                });
            }
          } else {
            if (this.type.type_phone == "404") {
              this.$message({
                message: "该手机号已注册",
                type: "warning",
              });
              this.activeClass = -1;
            } else {
              axios
                .get("/code/createCode")
                .then((res) => {});

              // var time = 5;
              this.activeClass = 0;
              var that = this;
              this.time1 = setInterval(function() {
                ;
                that.time--, (that.yzm = that.time + "秒");
                if (that.time == 0) {
                  that.activeClass = -1;
                  that.yzm = "重新发送";
                  that.disablen = true;
                  clearInterval(that.time1);
                }
              }, 1000);

              axios
                .get("/code/sendPhoneCode", {
                  params: {
                    phoneNum: this.sjh.number,
                    type: 2,
                  },
                })
                .then((res) => {
                  if (res.data.code == 404) {
                    this.open("验证码发送失败，请重试！");

                    clearInterval(this.time1);
                    this.yzm = "重新发送";
                    this.activeClass = -1;
                    clearInterval(this.time1);
                  } else {
                    this.$message({
                      message: "验证码发送成功，请查收！",
                      type: "success",
                    });
                  }
                  ;
                });
              if (time == 0) {
                clearInterval(this.time1);
              }
            }
          }
        }, 1000);
      }
    },
    login_yhm() {
      this.loading2 = true;

      setTimeout(() => {
        this.login_type = 1;
        this.loading2 = false;
      }, 1000);
    },
    login_yzm() {
      this.loading2 = true;
      setTimeout(() => {
        this.login_type = 0;
        this.loading2 = false;
      }, 1000);
    },
    chan_name() {
      ;
      this.loading1 = true;

      setTimeout(() => {
        this.zc_type = 1;
        this.loading1 = false;
      }, 1000);
    },
    chan_email() {
      this.loading1 = true;

      setTimeout(() => {
        this.zc_type = 2;
        this.loading1 = false;
      }, 1000);
    },
    chan_number() {
      this.loading1 = true;

      setTimeout(() => {
        this.zc_type = 0;
        this.loading1 = false;
      }, 1000);
    },
    open(masgs) {
      //弹窗提示
      this.$message(masgs);
    },
    phone() {
      //发送请求判断该手机号是否注册
      var params = "";
      if (this.value1 == "second") params = this.login_number.number;
      else params = this.sjh.number;
      ByPhoneNum({
        phoneNum: params,
      }).then((res) => {
        ;
        this.type.type_phone = res.code;
      });
    },
    isemail() {
      //判断邮箱是否注册

      var email = "";
      if (this.value1 == "second") email = this.login_number.email;
      else email = this.email.email;
      ByEmail({ email: email }).then((res) => {
        ;
        this.type.type_email = res.code;
      });
    },
    ifname() {
      //判断用户名是否注册
      this.ruleForm.type = 1;
      ByUser({ username: this.ruleForm.name })
        .then((res) => {
          ;
          this.type.type_name = res.code;
          ;
        })
        .catch(function(error) {})
        .then(function() {
          // always executed
        });
    },

    submitForm(formName) {
      //用户名注册

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.zc_type == 0) {
            var params = new URLSearchParams();
            params.append("phoneNum", this.sjh.number);
            params.append("password", this.sjh.pass);

            var params1 = new URLSearchParams();
            params1.append("yzm", this.sjh.yzm);
            axios
              .post("/code/verifyCode", params1, {})
              .then((response) => {
                ;
                this.open(response.data.msg);
                if (response.data.code == 200) {
                  axios
                    .post(
                      //手机号注册
                      "/fl-registerOrLogin/registerByPhoneNum",
                      params
                    )
                    .then((response) => {
                      ;
                      // ;
                      this.open(response.data.msg);
                      if (response.data.code == 200) this.value1 = "second";
                    })
                    .catch(function(error) {
                      this.open("dd");
                    });
                }
              });
          } else if (this.zc_type == 1) {
            //用户名注册
            axios
              .post("/fl-registerOrLogin/registerUser", {
                username: this.ruleForm.name,
                password: this.ruleForm.pass,
              })
              .then((response) => {
                ;
                // ;
                this.open(response.data.msg);
                this.value1 = "second";
              })
              .catch(function(error) {
                this.open("dd");
              });
          } else {
            var params1 = new URLSearchParams();
            params1.append("yzm", this.email.yzm);
            axios
              .post("/code/verifyCode", params1, {})
              .then((response) => {
                ;
                this.open(response.data.msg);
                if (response.data.code == 200) {
                  var params = new URLSearchParams(); //邮箱注册
                  params.append("email", this.email.email);
                  params.append("password", this.email.pass);
                  axios
                    .post(
                      "/fl-registerOrLogin/registerByEmail",
                      params,
                      {}
                    )
                    .then((response) => {
                      ;
                      // ;
                      this.open(response.data.msg);
                      if (response.data.code == 200) this.value1 = "second";
                    })
                    .catch(function(error) {
                      this.open("dd");
                    });
                }
              });
          }
        } else {
          ;
          return false;
        }
      });
    },

    submitForm1() {
      //用户登录
      var api = "";
      var params = new URLSearchParams();
      this.loading = true;

      const _this = this;

      user_login({
        username: this.login.name,
        password: this.login.pass,
      })
        .then((res) => {
          ;
          if (res.data.code == 404) {
            ;
            this.open(res.data.msg);
            // alert("用户名密码错误")
            this.loading = false;
          } else {
            this.open(res.data.msg);

            ;
            const jwt = res.headers.authorization; //接收token值
            const userInfo = res.data.data; //接收登录用户信息
            //发送客户端ip给后端
             let params = new URLSearchParams();
            params.append('ip',localStorage.getItem('Ip'))
            params.append('userId',userInfo.userId)
            axios.post('/fl-registerOrLogin/sendUserIpDetail',params).then((res)=>{
              
            })

            ;
            ;
            //把数据用Vuex共享出去
            ;

            this.$store.commit("SET_TOKEN", jwt);
            this.$store.commit("SET_USERINFO", userInfo);
            if (this.$route.fullPath == "/login") {
              this.$router.push("/index");
            } else {
              this.$router.push(this.$route.query.redirect);
            }

            //并到主页渲染已登录状态
          }
        })
        .catch(function(error) {
          ;
          this.loading = false;
        });
    },
    submitForm2() {
      this.loading = true;
      //校验验证码
      var params = new URLSearchParams();
      params.append("yzm", this.login_number.rules);
      axios
        .post("/code/verifyCode", params, {})
        .then((res) => {
          ;
          this.open(res.data.msg);
          if (res.data.code == 200) {
            var params = new URLSearchParams();
            params.append("phoneNum", this.login_number.number);
            axios
              .post(
                "/fl-registerOrLogin/loginUserByPhoneCode",
                params,
                {}
              )
              .then(async (res) => {
                ;
                this.type.type_phone = res.data.code;
                if (res.data.code == 200) {
                  this.open(res.data.msg);

                  ;
                  const jwt = res.headers.authorization; //接收token值
                  const userInfo = res.data.data; //接收登录用户信息
                  //获取用户购物车商品数量

                  ;
                  ;
                  //把数据用Vuex共享出去
                  ;
                  this.$router.push("/index");
                  this.$store.commit("SET_TOKEN", jwt);
                  this.$store.commit("SET_USERINFO", userInfo);

                  //并到主页渲染已登录状态
                }
              })
              .catch(function(error) {
                ;
                this.loading = false;
              });
          } else {
            this.loading = false;
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  watch: {
    zc_type() {
      (this.activeClass = -1), // 0为默认选择第一个，-1为不选择
        (this.yzm = "发送验证码"),
        clearInterval(this.time1);
      (this.disabled = false),
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate(); //清除残余提示
          // this.$refs.sjh.clearValidate();
          // this.$refs.email.clearValidate();
        });
      this.$nextTick(() => {
        //  this.$refs.ruleForm.clearValidate();
        this.$refs.sjh.clearValidate();
        // this.$refs.email.clearValidate();
      });
      this.$nextTick(() => {
        //  this.$refs.ruleForm.clearValidate();
        // this.$refs.sjh.clearValidate();
        this.$refs.email.clearValidate();
      });
    },
    login_type() {
      this.$nextTick(() => {
        this.$refs.login.clearValidate(); //清除残余提示
        // this.$refs.sjh.clearValidate();
        // this.$refs.email.clearValidate();
      });
      this.$nextTick(() => {
        this.$refs.login_number.clearValidate(); //清除残余提示
        // this.$refs.sjh.clearValidate();
        // this.$refs.email.clearValidate();
      });
    },
  },
};
</script>
}

<style>
.demo-ruleForm {
  position: relative;
  right: 6%;
}
.texiao {
  position: absolute;
  width: 98%;
  height: 98%;
  background: #f7fafc;
}
.login {
  text-align: center;
}
.tou {
  text-align: center;
  width: 500px;
  position: relative;
  left: 37%;
  padding-top: 100px;
}
.states .left,
.social_account {
  margin-left: 30px;
}

a {
  text-decoration: none;
}
.tabs {
  position: relative;
  width: 400px;
  left: 40%;
}
h2 {
  margin: 30px 0;
  font-weight: 400;
  font-size: 18px;
}
.group_input {
  position: relative;
  text-align: left;
}
.group_input input {
  width: 274px;
  padding: 16px 12px;
  margin: -1px;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  background-color: #fff;
}
.group_input li {
  width: 400px;
  position: relative;
  list-style: none;
}
.submit_btn {
  width: 80%;
  box-shadow: none;
  border: 0;
  position: relative;
  left: 30px;
  line-height: 45px;
  font-size: 15px;
  display: block;
  margin: 20px 0;
  color: #fff;
  background-color: #0f88eb;
  border-radius: 3px;
}

.states {
  position: relative;
  width: 100%;
  height: 20px;
  font-size: 90%;
  margin-top: 18px;
  color: #878787;
  overflow: hidden;
}

.states > .social_account {
  position: absolute;
  left: 0;
  cursor: pointer;
  color: #878787;
}
.states i {

}

.states > .left {
  float: left;
    cursor: pointer;
}
.states > .right {
  float: right;
}
.agreement-tip {
  font-size: 90%;
  color: #878787;

  margin-top: 300px;
}
.form {
  pointer-events: none;
}
</style>
